<template>
  <section v-loading="loading">
    <el-tabs
      type="border-card"
      v-model="searchForm.status"
      class="manage-order"
      @tab-change="tabChange"
    >
      <el-tab-pane label="全部" name="all"> </el-tab-pane>
      <el-tab-pane label="已取消" :name="0"> </el-tab-pane>
      <el-tab-pane label="待支付" :name="1"> </el-tab-pane>
      <el-tab-pane label="待发货" :name="3"> </el-tab-pane>
      <el-tab-pane label="待收货" :name="4"> </el-tab-pane>
      <el-tab-pane label="已完成" :name="9"> </el-tab-pane>
    </el-tabs>
    <div class="manage-order-content">
      <div class="order-head">
        <el-form inline>
          <el-form-item>
            <el-input
              style="width: 100%"
              v-model="searchForm.order_no"
              placeholder="订单号"
            />
          </el-form-item>
          <el-form-item>
            <el-input
              style="width: 100%"
              v-model="searchForm.username"
              placeholder="用户姓名"
            />
          </el-form-item>
          <el-form-item>
            <el-date-picker
              style="width: 100%"
              v-model="searchForm.timeArr"
              type="daterange"
              value-format="YYYY-MM-DD"
              range-separator="至"
              start-placeholder="下单开始日期"
              end-placeholder="下单结束日期"
            />
          </el-form-item>

          <el-form-item>
            <el-select
              v-model="searchForm.payment_status"
              clearable
              placeholder="支付状态"
            >
              <el-option label="已支付" :value="1" />
              <el-option label="未支付" :value="0" />
            </el-select>
          </el-form-item>
          <el-form-item>
            <el-input
              style="width: 100%"
              v-model="searchForm.send_number"
              placeholder="物流单号"
            />
          </el-form-item>
          <el-form-item>
            <el-input
              style="width: 100%"
              v-model="searchForm.addr_name"
              placeholder="收货人姓名"
            />
          </el-form-item>
          <el-form-item>
            <el-input
              style="width: 100%"
              v-model="searchForm.addr_phone"
              placeholder="收货电话"
            />
          </el-form-item>
          <el-form-item>
            <el-button type="primary" @click="searchFun">查询</el-button>
            <el-button @click="resetFun">重置</el-button>
            <el-button type="success" @click="exportFun">导出</el-button>
          </el-form-item>
        </el-form>
      </div>
      <div class="coupon-table">
        <el-table
          border
          stripe
          :data="tableData"
          :height="store.tableHeight - 140"
          @selection-change="handleSelectionChange"
        >
          <!-- <el-table-column label="ID" width="55" prop="id" align="center" /> -->
          <el-table-column label="用户信息" width="300">
            <template #default="{ row }">
              <div class="manage-info">
                <el-image
                  :preview-teleported="true"
                  style="width: 50px; min-width: 50px; height: 50px"
                  :src="imgSrc(row?.user?.headimg)"
                  :zoom-rate="1.2"
                  :preview-src-list="[imgSrc(row?.user?.headimg)]"
                  :initial-index="4"
                  fit="cover"
                  class="img-box"
                />
                <div class="right">
                  <div>
                    <!-- <label>用户昵称：</label> -->
                    <span>{{ row?.user?.nickname }} </span>
                  </div>
                  <div>
                    <!-- <label>ID：</label> -->
                    <span>ID：{{ row?.user?.id }} </span>
                  </div>
                  <div>
                    <!-- <label>推荐手机：</label> -->
                    <span>{{ row?.user?.phone }} </span>
                  </div>
                </div>
              </div>
            </template>
          </el-table-column>

          <el-table-column prop="order_no" label="商品订单单号" />

          <el-table-column prop="amount_real" label="订单实际金额" />
          <!-- <el-table-column prop="payment_status" label="支付状态">
            <template #default="{ row }">
              <el-tag v-if="row.payment_status == 1">已支付</el-tag>
              <el-tag v-else-if="row.payment_status == 0" type="danger">
                未支付
              </el-tag>
            </template> 
          </el-table-column> -->
          <el-table-column prop="" label="订单状态">
            <template #default="{ row }">
              <el-tag v-if="row.status == 0" type="info">已取消</el-tag>
              <el-tag v-else-if="row.status == 1" type="danger">
                待支付
              </el-tag>
              <el-tag v-else-if="row.status == 2" type="warning">
                支付中
              </el-tag>
              <el-tag v-else-if="row.status == 3" type="success">
                已支付
              </el-tag>
              <el-tag v-else-if="row.status == 4"> 已发货 </el-tag>
              <el-tag v-else-if="row.status == 6">
                已收货【过度状态，自动结算返利】
              </el-tag>
              <el-tag v-else-if="row.status == 9" type="success">
                已完成
              </el-tag>
            </template>
          </el-table-column>
          <el-table-column prop="created_at" label="订单创建时间" width="170" />
          <el-table-column prop="payment_status" label="收货信息">
            <template #default="{ row }">
              <div>
                {{ row?.send?.address_name }}
              </div>
              <div>
                {{ row?.send?.address_phone }}
              </div>
              <div>
                {{ row?.send?.address_province }}
                {{ row?.send?.address_city }}
                {{ row?.send?.address_area }}
                {{ row?.send?.address_content }}
              </div>
            </template>
          </el-table-column>
          <el-table-column prop="" label="商品信息" show-overflow-tooltip>
            <template #default="{ row }">
              <div v-for="item in row.items">
                <div style="white-space: nowrap; font-size: 12px">
                  {{ item.goods_name }} （ {{ item.goods_spec }} ）
                </div>
              </div>
            </template>
          </el-table-column>

          <el-table-column
            label="操作"
            width="120"
            align="center"
            fixed="right"
          >
            <template #default="{ row }">
              <el-button type="primary" link @click="updateOpen(row)">
                详情
              </el-button>
              <el-button
                v-if="row.status == 3"
                type="success"
                link
                @click="sendOrder(row)"
              >
                发货
              </el-button>
              <!-- <el-button type="warning" link @click="cancelOrder(row)">
                取消订单
              </el-button> -->
            </template>
          </el-table-column>
        </el-table>
        <div class="pagination-div">
          <div>
            <!-- <el-button type="danger" :disabled="selectData.length == 0 ? true : false" @click="delAllFun">
              <template #icon>
                <IEpDelete />
              </template>
              批量删除</el-button> -->
          </div>
          <el-pagination
            v-model:currentPage="currentPage"
            v-model:page-size="pageSize"
            :page-sizes="[20, 50, 100, 200]"
            layout="total, sizes, prev, pager, next, jumper"
            :total="total"
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
          />
          <div></div>
        </div>
      </div>
    </div>
  </section>
  <drawerPage
    ref="drawerPageRef"
    :remarkType="true"
    :priceType="true"
    @refreshList="refreshList"
  />
  <sendPage ref="sendPageRef" @refreshList="refreshList" />
</template>
<script setup>
import { listApi, exportApi } from "@/plugins/api/shopping/order";
import { useCounterStore } from "@/stores/counter.js";
import drawerPage from "./components/DrawerCustom.vue";
import sendPage from "./components/Dialogorder-send.vue";
const store = useCounterStore();
let searchForm = ref({
  status: "all",
});

//
let tableData = ref([]);
let selectData = ref([]);
let loading = ref(false);
const currentPage = ref(1);
const pageSize = ref(20);
const total = ref(0);
const handleSizeChange = (val) => {
  pageSize.value = val;
  selectData.value = [];
  getData();
};
const handleCurrentChange = (val) => {
  currentPage.value = val;
  selectData.value = [];
  getData();
};

function searchFun() {
  currentPage.value = 1;
  selectData.value = [];
  tableData.value = [];
  getData();
}
function resetFun() {
  currentPage.value = 1;
  searchForm.value = {
    status: "all",
  };
  tableData.value = [];
  selectData.value = [];
  getData();
}
function refreshList() {
  getData();
}
function getData() {
  loading.value = true;
  let obj = Object.assign(
    {
      page: currentPage.value,
      pageSize: pageSize.value,
    },
    searchForm.value
  );
  obj.order_date_start = obj.timeArr ? obj.timeArr[0] : "";
  obj.order_date_end = obj.timeArr ? obj.timeArr[1] : "";
  delete obj.timeArr;
  if (obj.status == "all") obj.status = "";
  listApi(obj)
    .then((data) => {
      tableData.value = data.list;
      total.value = data.page.total;
      loading.value = false;
    })
    .catch(() => {
      loading.value = false;
    });
}
function handleSelectionChange(val) {
  selectData.value = val;
}
function delAllFun() {
  ElMessageBox.confirm("确认批量删除选中的数据，是否继续?", "提示", {
    confirmButtonText: "确认",
    cancelButtonText: "取消",
    type: "warning",
  })
    .then(() => {
      let arr = selectData.value.map((ele) => {
        return ele.id;
      });
      delApi({
        id: arr.join(","),
      }).then(() => {
        ElMessage({
          type: "success",
          message: "删除成功！",
        });
        selectData.value = [];
        getData();
      });
    })
    .catch(() => {
      ElMessage({
        type: "info",
        message: "已取消。",
      });
    });
}
function tabChange(name) {
  currentPage.value = 1;
  selectData.value = [];
  tableData.value = [];
  getData();
}
function imgSrc(path) {
  return import.meta.env.VITE_APP_BASE_API + path;
}
// 详情
let drawerPageRef = ref(null);
function updateOpen(row) {
  drawerPageRef.value.initFun(row);
}

// 取消订单
function cancelOrder(row) {}
// 发货
let sendPageRef = ref(null);
function sendOrder(row) {
  sendPageRef.value.initFun(row);
}
// 导出
function exportFun() {
  let obj = Object.assign({}, searchForm.value);
  obj.order_date_start = obj.timeArr ? obj.timeArr[0] : "";
  obj.order_date_end = obj.timeArr ? obj.timeArr[1] : "";
  delete obj.timeArr;
  if (obj.status == "all") obj.status = "";
  exportApi(obj).then((res) => {
    const url = window.URL.createObjectURL(new Blob([res]));
    const link = document.createElement("a");
    link.href = url;
    link.setAttribute("download", "data.xlsx");
    document.body.appendChild(link);
    link.click();
  });
}
//
onMounted(() => {
  getData(searchForm);
});
</script>

<style lang="scss" scoped>
.manage-order {
  border-bottom: none !important;

  :deep(.el-tabs__content) {
    padding: 0;
  }
}

.manage-order-content {
  width: 100%;
  padding: 10px;
  height: calc(100% - 40px);
  overflow: hidden;
  border: 1px solid #dcdfe6;
  border-top: none;
  box-sizing: border-box;

  .order-head {
  }

  .pagination-div {
    display: flex;
    justify-content: space-between;
    margin-top: 10px;
  }

  .manage-info {
    display: flex;

    .img-box {
      align-self: center;
    }

    .right {
      margin-left: 10px;
      align-self: center;

      span {
        color: #409eff;
      }
    }
  }
}
</style>
